<!-- 工单处理页面 -->
<template>
  <div class="form-manage-container">
    <div class="setion">
        <div class="head">工单信息</div>
        <formMainListItem
          v-for="(mod, index) in list"
          :key="index"
          :mod="mod"
          class="item"
        ></formMainListItem>
        <img src="@/assets/img/form/form_section_bg.png" />
      </div>

      <div class="setion manage">
        <div class="head">处理信息</div>
        <formMainListItem
          v-for="(mod, index) in manageList"
          :key="index"
          :mod="mod"
          class="item"
          @showPick="showPick"
          @changeInput="changeInput"
        ></formMainListItem>
        <img src="@/assets/img/form/form_section_bg.png" />
      </div>

      <div class="setion">
        <div class="head">{{ reportTitle }}</div>
        <formMainListItem
          v-for="(mod,index) in switchManageList()"
          :key="mod.title+index"
          :mod="mod"
          class="item"
          @showPick="showPick"
          @changeInput="changeInput"
        ></formMainListItem>
        <img src="@/assets/img/form/form_section_bg.png" />
      </div>

      <div class="setion file" v-show="showUploadfile">
        <div class="head">上传附件</div>
        <div class="file-content">
          <img :src="'https://12345.shsports.cn' + formParams.fileUrl" class="back-img" v-show="showFile">
          <van-icon name="close" size="20px" style="position: absolute; right: 10px; top: 0px; color: aliceblue;" v-show="showFile" @click="removeImg"/>
          <van-uploader :after-read="afterRead" v-show="!showFile" >
            <button>上传</button>
          </van-uploader>

          <div v-show="!showFile">只能上传jpg/png文件，且不超过50m</div>
          <img class="item-img" src="@/assets/img/form/form_section_bg2.png" v-show="!showFile"/>
        </div>
      </div>

      <div class="foot">
        <button
          class="btn-size left"
          @click="saveForm"
          v-show="formParams.status == '1'"
        >
          暂存工单
        </button>
        <button class="btn-size right" @click="submitForm">提交</button>
      </div>

      <van-popup v-model:show="show" round position="bottom">
      <van-picker
        :columns="getSelectList"
        @cancel="onCancel"
        @confirm="onConfirm"
      />
    </van-popup>
    <van-popup v-model:show="showDate" round position="bottom">
      <van-date-picker
        :v-model="currentDate"
        @cancel="onCancel"
        @confirm="onConfirm"
      />
    </van-popup>
    <van-calendar v-show="showCalendar" type="range" @confirm="onDateConfirm" @cancel="onCancel"/>
  </div>
</template>

<script setup>
import formMainListItem from "@/components/formMainListItem.vue";
import { useFormManage } from "@/category/useFormManage";
import { onMounted } from "vue";

const {
  formParams,
  //显示选择日期
  showDate,
  //下拉框内容
  getSelectList,
  currentDate,
  show,
  showCalendar,
  reportTitle,
  list,
  //上传附件
  showUploadfile,
  manageList,
  showFile,
  switchManageList,
  onCancel,
  onConfirm,
  onDateConfirm,
  showPick,
  submitForm,
  saveForm,
  getFormDetail,
  changeInput,
  afterRead
} = useFormManage();


const removeImg = () => {
  formParams.value.fileUrl = ""
}

onMounted(() => {
  getFormDetail();
});
</script>

<script>
//name声明
export default {
  name: "formManage",
};
</script>

<style lang="less" scoped>
.form-manage-container {
  .setion {
    margin: 40px 28px;
    width: calc(100% - 56px);
    background: #fefeff;
    box-shadow: 0px 8px 48px 0px rgba(4, 10, 41, 0.06);
    border-radius: 4px;
    min-height: 100px;
    height: auto;
    position: relative;
    .head {
      font-size: 36px;
      font-weight: 600;
      color: #333333;
      line-height: 98px;
      height: 98px;
      padding-left: 28px;
    }
    .item {
      z-index: 2;
      min-height: 80px;
      height: auto;
      // height: 80px;
    }

    img {
      width: 226px;
      height: 240px;
      position: absolute;
      right: 0;
      bottom: 0;
      object-fit: contain;
    }
  }

  .manage {
    height: 218px;
    img {
      height: 212px;
    }
  }

  .file {
    height: 358px;
    .head {
      font-size: 36px;
      font-weight: 600;
      color: #333333;
      line-height: 98px;
      height: 98px;
      padding-left: 28px;
    }

    .file-content {
      background: rgba(3, 120, 254, 0.06);
      height: 220px;
      margin-right: 28px;
      margin-left: 28px;
      width: calc(100% - 56px);
      font-size: 28px;
      font-weight: 400;
      color: #666666;
      line-height: 40px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;

      .back-img {
        position: absolute;
        width: 100%;
        height: 100%;
        object-fit: fill;
      }
      button {
        z-index: 2;
        font-size: 28px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #fefeff;
        line-height: 40px;
        width: 140px;
        height: 60px;
        background: #0378fe;
        border: 1px #0378fe solid;
        border-radius: 4px;
        margin-bottom: 28px;
      }

      & > div {
        z-index: 2;
      }

      .item-img {
        height: 212px;
        margin-right: 28px;
        margin-bottom: 40px;
      }
    }
  }

  .foot {
    margin: 40px 28px;
    width: calc(100% - 56px);
    background: #f8f8fa;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 88px;
    .btn-size {
      height: 88px;
      flex: 1;
      font-size: 32px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      line-height: 44px;
      border-radius: 4px;
      border: 2px solid #0378fe;
      margin-left: 28px;
      margin-right: 28px;
    }

    .left {
      color: #0378fe;
      background: white;
    }

    .right {
      background: #0378fe;
      color: #fefeff;
    }
  }

  .shadow-view {
    z-index: 10;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }
}
</style>
